<script setup>
import { staticPrimaryColor } from '@/plugins/vuetify/theme'
import { useThemeConfig } from '@core/composable/useThemeConfig'
import {
  RouteTransitions,
  Skins,
  customizerThemes,
} from '@core/enums'
import {
  AppContentLayoutNav,
  ContentWidth,
  FooterType,
  NavbarType,
} from '@layouts/enums'
import { themeConfig } from '@themeConfig'
import { useTheme } from 'vuetify'

const isNavDrawerOpen = ref(false)
const { theme, skin, appRouteTransition, navbarType, footerType, isVerticalNavCollapsed, isVerticalNavSemiDark, appContentWidth, appContentLayoutNav, isAppRtl, isNavbarBlurEnabled, isLessThanOverlayNavBreakpoint } = useThemeConfig()

// 👉 Primary Color
const vuetifyTheme = useTheme()

// const vuetifyThemesName = Object.keys(vuetifyTheme.themes.value)
const initialThemeColors = JSON.parse(JSON.stringify(vuetifyTheme.current.value.colors))

const colors = [
  'primary',
  'secondary',
  'success',
  'info',
  'warning',
  'error',
]

const setPrimaryColor = color => {
  const currentThemeName = vuetifyTheme.name.value

  vuetifyTheme.themes.value[currentThemeName].colors.primary = color
  localStorage.setItem(`${ themeConfig.app.title }-${ currentThemeName }ThemePrimaryColor`, color)
  localStorage.setItem(`${ themeConfig.app.title }-initial-loader-color`, color)
}

const getBoxColor = (color, index) => index ? color : staticPrimaryColor
const { width: windowWidth } = useWindowSize()

const headerValues = computed(() => {
  const entries = Object.entries(NavbarType)
  if (appContentLayoutNav.value === AppContentLayoutNav.Horizontal)
    return entries.filter(([_, val]) => val !== NavbarType.Hidden)
  
  return entries
})
</script>

<template>
  <template v-if="!isLessThanOverlayNavBreakpoint(windowWidth)">
    <VBtn
      icon
      size="small"
      class="app-customizer-toggler rounded-s-lg rounded-0"
      style="z-index: 1001;"
      @click="isNavDrawerOpen = true"
    >
      <VIcon
        size="22"
        icon="tabler-settings"
      />
    </VBtn>

    <VNavigationDrawer
      v-model="isNavDrawerOpen"
      temporary
      border="0"
      location="end"
      width="400"
      class="app-customizer"
    >
      <!-- 👉 Header -->
      <div class="customizer-heading d-flex align-center justify-space-between">
        <div>
          <h6 class="text-h6">
            配置
          </h6>
          <span class="text-body-1">实时自定义和预览</span>
        </div>
        <IconBtn @click="isNavDrawerOpen = false">
          <VIcon
            icon="tabler-x"
            size="20"
          />
        </IconBtn>
      </div>

      <VDivider />


      <!-- SECTION Theming -->
      <CustomizerSection
        title="主题化"
        :divider="false"
      >
        <!-- 👉 皮肤 -->
        <h6 class="text-base font-weight-regular">
          皮肤
        </h6>
        <VRadioGroup
          v-model="skin"
          inline
        >
          <VRadio
            v-for="[key, val] in Object.entries(Skins)"
            :key="key"
            :label="key"
            :value="val"
          />
        </VRadioGroup>

        <!-- 👉 主题 -->
        <h6 class="mt-3 text-base font-weight-regular">
          主题
        </h6>
        <VRadioGroup
          v-model="theme"
          inline
        >
          <VRadio
            v-for="[key, val] in Object.entries(customizerThemes)"
            :key="key"
            :label="key"
            :value="val"
            class="text-capitalize"
          />
        </VRadioGroup>

        <!-- 👉 Primary color -->
        <h6 class="mt-3 text-base font-weight-regular">
          基本色
        </h6>
        <div class="d-flex gap-x-4 mt-2">
          <div
            v-for="(color, index) in colors"
            :key="color"
            style=" border-radius: 0.5rem; block-size: 2.5rem;inline-size: 2.5rem; transition: all 0.25s ease;"
            :style="{ backgroundColor: getBoxColor(initialThemeColors[color], index) }"
            class="cursor-pointer d-flex align-center justify-center"
            :class="{ 'elevation-4': vuetifyTheme.current.value.colors.primary === getBoxColor(initialThemeColors[color], index) }"
            @click="setPrimaryColor(getBoxColor(initialThemeColors[color], index))"
          >
            <VFadeTransition>
              <VIcon
                v-show="vuetifyTheme.current.value.colors.primary === (getBoxColor(initialThemeColors[color], index))"
                icon="tabler-check"
                color="white"
              />
            </VFadeTransition>
          </div>
        </div>
      </CustomizerSection>
      <!-- !SECTION -->

      <!-- SECTION LAYOUT -->
      <CustomizerSection title="布局">
        <!-- 👉 Content Width -->
        <h6 class="text-base font-weight-regular">
          内容宽度
        </h6>
        <VRadioGroup
          v-model="appContentWidth"
          inline
        >
          <VRadio
            v-for="[key, val] in Object.entries(ContentWidth)"
            :key="key"
            :label="key"
            :value="val"
          />
        </VRadioGroup>
        <!-- 👉 Navbar Type -->
        <h6 class="mt-3 text-base font-weight-regular">
          {{ appContentLayoutNav === AppContentLayoutNav.Vertical ? '导航栏' : '头部' }} 类型
        </h6>
        <VRadioGroup
          v-model="navbarType"
          inline
        >
          <VRadio
            v-for="[key, val] in headerValues"
            :key="key"
            :label="key == 'Sticky' ? '固定': (key == 'Static'? '静态':'隐藏')"
            :value="val"
          />
        </VRadioGroup>
        <!-- 👉 Footer Type -->
        <h6 class="mt-3 text-base font-weight-regular">
          底部 类型
        </h6>
        <VRadioGroup
          v-model="footerType"
          inline
        >
          <VRadio
            v-for="[key, val] in Object.entries(FooterType)"
            :key="key"
            :label="key == 'Sticky' ? '固定': (key == 'Static'? '静态':'隐藏')"
            :value="val"
          />
        </VRadioGroup>
        <!-- 👉 Navbar blur -->
        <div class="mt-4 d-flex align-center justify-space-between">
          <VLabel
            for="customizer-navbar-blur"
            class="text-high-emphasis"
          >
            导航栏模糊
          </VLabel>
          <div>
            <VSwitch
              id="customizer-navbar-blur"
              v-model="isNavbarBlurEnabled"
              class="ms-2"
            />
          </div>
        </div>
      </CustomizerSection>
      <!-- !SECTION -->

      <!-- SECTION Menu -->
      <CustomizerSection title="菜单">
        <!-- 👉 Menu Type -->
        <h6 class="text-base font-weight-regular">
          菜单类型
        </h6>
        <VRadioGroup
          v-model="appContentLayoutNav"
          inline
        >
          <VRadio
            v-for="[key, val] in Object.entries(AppContentLayoutNav)"
            :key="key"
            :label="key == 'Vertical' ? '竖向':'横向'"
            :value="val"
          />
        </VRadioGroup>

        <!-- 👉 Collapsed Menu -->
        <div
          v-if="appContentLayoutNav === AppContentLayoutNav.Vertical"
          class="mt-4 d-flex align-center justify-space-between"
        >
          <VLabel
            for="customizer-menu-collapsed"
            class="text-high-emphasis"
          >
            Collapsed Menu
          </VLabel>
          <div>
            <VSwitch
              id="customizer-menu-collapsed"
              v-model="isVerticalNavCollapsed"
              class="ms-2"
            />
          </div>
        </div>

        <!-- 👉 Semi Dark Menu -->
        <div
          class="mt-4 align-center justify-space-between"
          :class="vuetifyTheme.global.name.value === 'light' && appContentLayoutNav === AppContentLayoutNav.Vertical ? 'd-flex' : 'd-none'"
        >
          <VLabel
            for="customizer-menu-semi-dark"
            class="text-high-emphasis"
          >
            Semi Dark Menu
          </VLabel>
          <div>
            <VSwitch
              id="customizer-menu-semi-dark"
              v-model="isVerticalNavSemiDark"
              class="ms-2"
            />
          </div>
        </div>
      </CustomizerSection>
      <!-- !SECTION -->

      <!-- SECTION MISC -->
      <CustomizerSection title="杂项">
        <!-- 👉 RTL -->
        <div class="d-flex align-center justify-space-between">
          <VLabel
            for="customizer-rtl"
            class="text-high-emphasis"
          >
            RTL
          </VLabel>
          <div>
            <VSwitch
              id="customizer-rtl"
              v-model="isAppRtl"
              class="ms-2"
            />
          </div>
        </div>

        <!-- 👉 Route Transition -->
        <div class="mt-6">
          <VRow>
            <VCol
              cols="5"
              class="d-flex align-center"
            >
              <VLabel
                for="route-transition"
                class="text-high-emphasis"
              >
                路由切换动画
              </VLabel>
            </VCol>

            <VCol cols="7">
              <AppSelect
                id="route-transition"
                v-model="appRouteTransition"
                :items="Object.entries(RouteTransitions).map(([key, value]) => ({ key, value }))"
                item-title="key"
                item-value="value"
                single-line
              />
            </VCol>
          </VRow>
        </div>
      </CustomizerSection>
      <!-- !SECTION -->
    </VNavigationDrawer>
  </template>
</template>

<style lang="scss">
.app-customizer {
  .customizer-section {
    padding: 1.25rem;
  }

  .customizer-heading {
    padding-block: 0.875rem;
    padding-inline: 1.25rem;
  }

  .v-navigation-drawer__content {
    display: flex;
    flex-direction: column;
  }
}

.app-customizer-toggler {
  position: fixed !important;
  inset-block-start: 50%;
  inset-inline-end: 0;
}
</style>
